<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="审批人">
                <el-input v-model="formInline.name" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-button type="primary" v-on:click="toAdd">新增</el-button>
            <!--新增的弹窗-->
            <el-dialog title="添加页面" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" :label-width="formLabelWidth">
                        <div class="block">
                            <el-cascader
                                    v-model="value"
                                    :options="options"
                                    @change="handleChange"></el-cascader>
                        </div>
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否禁用" :label-width="formLabelWidth">
                        <template>
                            <el-radio v-model="form.enabled" :label="false">禁用</el-radio>
                            <el-radio v-model="form.enabled" :label="true">不禁用</el-radio>
                        </template>
                    </el-form-item>
                    <!-- 头像上传-->
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8081/user/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                        <img v-if="form.userface" :src="form.userface" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addUser">确 定</el-button>
                </div>
            </el-dialog>

            <el-button type="success" @click="delAll">批量删除</el-button>

        </el-row>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="delBeach">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="id"
                    width="100">
                <!--          <template slot-scope="scope">{{ scope.row.date }}</template>-->
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="userface"
                    label="头像"
                    width="100">
                <template slot-scope="scope">
                    <img :src="scope.row.userface" width="50px;">
                </template>
            </el-table-column>
            <el-table-column
                    prop="enabled"
                    label="是否禁用"
                    width="100">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.enabled"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="changeEnabled(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    prop=""
                    label="操作"
                    show-overflow-tooltip>
                <el-row slot-scope="scope">
                    <el-button type="primary" @click="toUpdate(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="delUser(scope.row)">删除</el-button>
                    <el-button type="success" @click="toRolePage(scope.row)">设置角色</el-button>
                </el-row>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="formInline.pageNum"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="formInline.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="formInline.total">
            </el-pagination>
        </div>
        <!--设置角色的对话框-->
        <el-dialog title="设置角色" :visible.sync="dialogTableVisible">
            <el-checkbox-group
                    v-model="userRole.rids">
                <el-checkbox v-for="r in roles" :label="r.id" :key="r.id">{{r.nameZh}}</el-checkbox>
            </el-checkbox-group>

            <el-button @click="dialogTableVisible = false">取消</el-button>
            <el-button type="primary" @click="addUserRole">确定</el-button>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                formInline: {
                    pageNum: 1,
                    pageSize: 3,
                    total: 0
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    id: 0,
                    name: "",
                    address: "",
                    phone: "",
                    userface: '',
                    province: '',
                    city: '',
                    district: '',
                    enabled: '',
                    username: '',
                    password: '',
                },
                formLabelWidth: '120px',
                ids: [],
                value: [],
                options: [],
                radio: '',
                gridData: [],
                roles: [],
                userRole:{
                    rids:[],
                    uid:'',
                },
            }

        },

        methods: {
            /*列表展示数据*/
            list() {
                //先后端发起请求,得到数据
                this.axios.get("http://localhost:8081/user/list", {params: this.formInline}).then(result => {
                    console.log(result);
                    this.tableData = result.data.data.list;
                    this.formInline.total = result.data.data.total;
                })
            },
            /*分页*/
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.formInline.pageSize = val;
                this.list();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.formInline.pageNum = val;
                this.list();
            },
            /*模糊查询*/
            onSubmit() {
                this.list();
            },
            /*去添加页面*/
            toAdd() {
                this.axios.get("http://localhost:8081/city/getCity", {params: {pid: 1}}).then(res => {
                    //复制之前处理空数组
                    console.log(res)
                    //this.options = res.data;

                    this.options = this.optionsDelNull(res.data);

                })
                this.dialogFormVisible = true;
            },
            /*处理三级联动空数据*/
            optionsDelNull(data) {
                if (data != null) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].children.length < 1) {
                            data[i].children = null;
                        } else {
                            this.optionsDelNull(data[i].children);
                        }
                    }
                }
                return data;
            },
            /*添加页面*/
            addUser() {
                this.dialogFormVisible = false;
                this.axios.post("http://localhost:8081/user/addUser", this.form).then(insert => {
                    alert(insert.data.result)
                    if (insert.data.result) {
                        this.$message("添加成功");
                        this.list();
                    } else {
                        this.$message("添加失败");
                    }
                })
                this.form = {};
            },
            /*获取批删的ids*/
            delBeach(val) {
                var id = val.map(val => val.id);
                console.log(id);
                this.ids = id;
            },
            /*批量删除*/
            delAll() {
                if (confirm("确定要删除吗?")) {
                    this.axios.post("http://localhost:8081/user/delAll", {ids: this.ids}).then(delAll => {
                        this.$message("删除成功");
                        this.list();
                        this.ids = {};
                    })
                } else {
                    alert("删除失败");
                }
            },
            /*单删*/
            delUser(row) {
                if (confirm("确定要删除吗?")) {
                    this.axios.post("http://localhost:8081/user/delAll", {ids: [row.id]}).then(delAll => {
                        this.$message("删除成功");
                        this.list();
                        this.ids = {};
                    })
                } else {
                    alert("删除失败");
                }
            },
            /*上传文件*/
            handleAvatarSuccess(res, file) {
                console.log("上传------", res);
                this.form.userface = res.fileUrl;
            },
            /*设置上传文件的格式*/
            /* beforeAvatarUpload(file) {
                 const isJPG = file.type === 'image/jpeg';
                 const isLt2M = file.size / 1024 / 1024 < 2;

                 if (!isJPG) {
                     this.$message.error('上传头像图片只能是 JPG 格式!');
                 }
                 if (!isLt2M) {
                     this.$message.error('上传头像图片大小不能超过 2MB!');
                 }
                 return isJPG && isLt2M;
             }*/
            handleChange(value) {
                console.log("三级联动" + value);
                this.form.province = value[0];
                this.form.city = value[1];
                this.form.district = value[2];

            },
            /*去修改页面*/
            toUpdate(row) {
                this.dialogFormVisible = true;
                //2.回显数据,三级联动的所有数据要查询出来
                this.axios.get("http://localhost:8081/city/getCity", {params: {pid: 1}}).then(res => {
                    //复制之前处理空数组
                    console.log(res)
                    //this.options = res.data;
                    this.options = this.optionsDelNull(res.data);
                })
                //
                this.value = [];
                this.axios.get("http://localhost:8081/user/getOne?id=" + row.id).then(res => {
                    console.log("11111111"+res.data.data)
                    this.form = res.data.data;
                    //三级联动回显
                    this.value.push(res.data.data.province, res.data.data.city, res.data.data.district)
                    //图片回显
                    this.form.userface = res.data.data.userface
                })
                //1.显示编辑页面
                //编辑的对话框显示出来,使用新增的对话框就可以了
            },
            changeEnabled(row) {
                this.axios.post("http://localhost:8081/user/addUser", row).then(resp => {
                    if (resp.data.result) {
                        this.$message("修改成功");
                    } else {
                        this.$message("修改失败");
                    }
                    this.list();
                })
            },
            /*弹出设置角色的对话框*/
            toRolePage(row) {
                this.userRole.rids=[];
                //开启对话框
                this.dialogTableVisible = true;

                this.userRole.uid=row.id;
                this.uid=row.id;

                //查询所有角色
                this.axios.get("http://localhost:8081/role/getRole").then(resp => {
                    console.log(resp.data.data);
                    this.roles = resp.data.data;
                })

                //查询用户拥有的角色
                this.axios.get("http://localhost:8081/user-role/getRoleByUid?uid="+this.uid).then(resp => {
                    console.log(resp.data.data);

                    resp.data.data.map(i=>{
                        this.userRole.rids.push(i.rid);
                    })
                });
                //console.log(this.userRole.rids);
            },
            addUserRole(){
                console.log(this.userRole.rids)

                this.axios.post("http://localhost:8081/user-role/addRole",this.userRole).then(resp => {
                    console.log("1111111"+resp);
                    if(resp.data.result){
                        this.$message("修改角色成功")
                    }else{
                        this.$message("修改角色失败")
                    }
                    //清空复选框
                    this.userRole.rids=[];
                    //关闭对话框
                    this.dialogTableVisible = false;
                })
            }

        },
        created() {
            //alert("走了钩子方法")
            //这是vue的钩子方法(构造方法)
            this.list()
        }

    }


</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>